<template>
    <div class="app-container">
        <section>
            <div class="contentBox">
                <div class="title">
                    <span>{{$route.query.title}}</span>
                </div>
                <div class="content">
                    <el-form ref="form" :label-position="top" :model="form"  class="form"  label-width="110px">
                        <el-form-item label="栏目名称:">
                            <el-select style="width:200px" clearable v-model="form.username" placeholder="">
                                <el-option label="已预约" value="1"> </el-option>
                                <el-option label="已完成" value="2"> </el-option>
                                <el-option label="已取消" value="3"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="栏目层级:" style="width:100%">
                            <el-select style="width:200px" clearable v-model="form.username" placeholder="">
                                <el-option label="已预约" value="1"> </el-option>
                                <el-option label="已完成" value="2"> </el-option>
                                <el-option label="已取消" value="3"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="编号ID"  style="width:100%">
                            <el-input v-model="form.username" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="上级栏目ID"  style="width:100%">
                            <el-input v-model="form.username" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单显示"  style="width:100%">
                            <el-radio-group v-model="form.show">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <div style="margin-top:40px">
                        <el-button type="primary" style="width:143px" @click="save">保存</el-button>
                        <el-button style="width:143px" @click="$router.go(-1)">取消</el-button>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
export default {
    data() {
        return {
            value1:false,
            options: [
                {
                    value: '离职',
                    label: '离职'
                },
                {
                    value: '调动',
                    label: '调动'
                }
            ],
            list:[{}],
            form: {
                role_id: '',
                username: '',
                realname: '',
                mobile: '',
                id: '',
                password: '',
                url:'',
                date:'',
                show:'是',
            },
            rules: {
                role_id: [
                    { required: true, message: '请选择角色', trigger: 'blur' },
                ],
            },
            roleList: []
        }
    },
    created() {
        if (this.$route.query.id) {
            this.form.id = this.$route.query.id
        }
        this.$route.meta.title = this.$route.query.title
    },
    mounted() {
    },
    methods: {
        add(){
            this.list.push({})
        },
        dele(index){
            this.list.splice(index,1)   
        },
        save() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let res = await this.$Http.setUserInfo(this.form)
                    if (res.status == 1) {
                        if (this.form.id) {
                            this.$message.success('编辑成功')
                        } else {
                            this.$message.success('添加成功')
                        }
                        this.$router.go(-1)
                    }
                } else {
                    return false;
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    section {
        .contentBox {
            background: #fff;
            border-radius: 8px;
            padding: 0px 24px 20px;
            min-width: 900px;
            min-height: calc(100vh - 165px );
            .title {
                line-height: 70px;
                font-size: 18px;
                font-weight: 600;
                color: #383b40;
                .el-icon-close {
                    cursor: pointer;
                }
            }
        }
        .content {
            max-width:800px;
            height: 100%;
            .form {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
        }
    }
}
::v-deep{
    .el-input{
        width: 250px;
    }
    .el-icon-circle-plus-outline,.el-icon-remove-outline{
        color: #999;
        font-size: 26px;
        margin: 0 5px;
    }
     .el-icon-circle-plus-outline{
        margin-left: 20px;
    }
    .el-icon-remove-outline{
        color: #f00;
    }
    .el-form-item__content{
        display: flex;
        align-items: center;
    }
    .el-radio-group{
        margin-top: 10px;
    }
}
</style>